<template>
  <div>
    <div v-if="currentPanel == 'list'">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>内容审查</span>
        </div>
        <el-row>
          <el-col :span="22">
            <el-input v-model="queryData.name" placeholder="请输入要搜索的名称"></el-input>
            <el-button type="primary" @click="queryDataHandle">查询</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-button type="primary" @click="resetQuery">重置</el-button>
          </el-col>
          <el-col :span="2">
            <el-button type="primary" @click="currentHandle({'currentPanel':'add'})">+创建规则</el-button>
          </el-col>
        </el-row>

        <div class="interspaceH"></div>

        <el-table :data="dataSource" :header-cell-style="{background:'#F3F4F7',color:'#555'}" style="width: 100%" :row-class-name="rowClassName">
          <el-table-column prop="name" label="规则名称"></el-table-column>
          <el-table-column prop="member" label="使用成员">
            <template slot-scope="scope">
              <div style="overflow: hidden;height: 20px" :id="scope.row.id">
                <span v-for="(u,i) in scope.row.member">
                  &nbsp;&nbsp;&nbsp;{{u.name}}<br/>
                </span>
              </div>
              <div>
                <el-button type="text" style="margin-left:10px" id="closeSearchBtn" @click="closeSearch(scope.row.id)">
                  {{ showAll[scope.row.id-1].word }}
                  <i :class=" showAll[scope.row.id-1].isTrue  ? 'el-icon-arrow-up ': 'el-icon-arrow-down'"></i>
                </el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="开关">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.switch" active-color="#13ce66"></el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="creator" label="创建人"></el-table-column>
          <el-table-column prop="createDate" label="创建时间" :formatter="formatter"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="updateHandle(scope.row)" type="text" size="small">编辑</el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button @click="deleteHandle(scope.row)" type="text" size="small">删除</el-button>
              <el-divider direction="vertical"></el-divider>
              <el-button @click="detailHandle(scope.row)" type="text" size="small">详情</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="interspaceH"></div>

        <el-pagination @size-change="queryDataHandle(pagePagination.currentPage,$event)"
                       @current-change="queryDataHandle($event,pagePagination.pageSize)"
                       :current-page="pagePagination.currentPage"
                       :page-sizes="pagePagination.pageSizes" :page-size="pagePagination.pageSize"
                       layout="total, sizes, prev, pager, next"
                       :total="dataSource.length">
        </el-pagination>
      </el-card>
    </div>

    <div v-if="currentPanel == 'add'">
      <CreateCen @currentHandle="addSubmit"/>
    </div>

    <div v-if="currentPanel == 'edit'">
      <UpdateCen :ruleForm="single" @currentHandle="edit" />
    </div>

    <div v-if="currentPanel == 'view'">
      <ViewCen :ruleData="single" @currentHandle="currentHandle" />
    </div>
  </div>
</template>

<script>
  import CreateCen from "@/views/riskControl/censorship/add"
  import UpdateCen from "@/views/riskControl/censorship/edit"
  import ViewCen from "@/views/riskControl/censorship/view"

  const initQueryData = {
    name: '',//名称
  }

  export default {
    components: {
      CreateCen,
      UpdateCen,
      ViewCen
    },
    data() {
      return {
        id:0,
        tablePage: 0,
        currentPanel: 'list',
        dictionary: {},
        fieldType: {
          createDate: "datetime"
        },
        queryData: {
          name: '',
        },
        dataSource: [
          {
            name: '张三',
            creator: '王五',
            describe: '测试规则',
            rules: [
              {case: '聊天记录监听'},
              {case: '通话记录监听'},
              {case: '话术监听'},
            ],
            member: [
              {name:'李四'},
              {name:'王五'},
              ],
            createDate: new Date(),
            switch: true
          }
        ],
        //分页后列表数据
        pageDataSource: [],
        pagePagination: {
          currentPage: 1,
          pageSizes: [10, 15, 20, 25],
          pageSize: 10,
          total: 0
        },
        showAll:[//使用成员列中按钮测试数据，查询出一条数据对应这里一组数据
          // {
          //   isTrue: false,//是否全部展示
          //   word: '展开'//按钮  展开或收起
          // }
        ],
        single:{},
      }
    },
    mounted() {
      this.initShowAll()
    },
    methods: {
      queryDataHandle() {
        let that = this

      },
      resetQuery() {
        this.queryData = {...initQueryData}
        this.$message({
          message: '重置成功',
          type: 'success'
        });
      },
      formatter(row, column) {
        let field = column.property;
        let value = row[field];
        return this.$utils.formatterForLable(field, value, this.fieldType, this['dictionary'][field]);
      },
      currentHandle(e) {
        this.currentPanel = e.currentPanel;
        this.initShowAll()//刷新成员列按钮
      },
      deleteHandle(row) {
        let that = this
        this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let i = 0;
          for (i; i < that.dataSource.length; i++) {
            if (that.dataSource[i]['id'] == row.id) {
              break
            }
          }
          that.dataSource.splice(i, 1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //详情页面
      detailHandle(row) {
        this.single = row;
        this.currentPanel = 'view';
      },
      //修改页面
      updateHandle(row) {
        this.single = row;
        this.currentPanel = 'edit';
      },
      closeSearch(id) {
        var showAll = this.showAll[id-1].isTrue
        var searchBoxHeght = document.getElementById(id);
        if (showAll == true) {
          searchBoxHeght.style.height = 20 + "px";
          this.showAll[id-1].word = '展开';
          this.showAll[id-1].isTrue = false;
        } else {
          searchBoxHeght.style.height = "auto";
          this.showAll[id-1].word = '收起';
          this.showAll[id-1].isTrue = true;
        }
      },
      rowClassName({row, rowIndex}) {
        //把每一行的索引放进row.id
        row.id = rowIndex+1;
      },
      initShowAll(){
        if (this.dataSource != null && this.dataSource != undefined && this.dataSource.length > 0){
          for (var i = 0; i < this.dataSource.length; i++){
            this.showAll.push({
              isTrue: false,
              word: '展开'
            })
          }
        }
      },
      //创建规则保存
      addSubmit(e,type){
        if (type == 'back'){//点击返回直接跳转
          this.currentHandle(e)
        }
        if(e.data != null && e.data != undefined){
          e.data.createDate = new Date()
          this.dataSource.push(e.data)
          //如果数据保存成功，跳转
          this.currentHandle(e)
        }
      },
      //修改规则
      edit(e,type){
        if (type == 'back'){//点击返回直接跳转
          this.currentHandle(e)
        }
        if(e.data != null && e.data != undefined){
          //如果数据修改成功，跳转
          this.currentHandle(e)
        }
      }
    }
  }
</script>

<style scoped>
  .box-card .el-input {
    width: 200px;
  }

  .box-card .el-select {
    width: 200px;
  }

  a {
    color: #298bef;
  }

  /*#member {*/
  /*  overflow: hidden;*/
  /*}*/
</style>
